import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// import About from '../views/About'
// import ArtistDetail from '../views/ArtistDetail'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/artist/:id',
    // name: 'ArtistDetail',
    // component: ArtistDetail
    component: () => import("../views/ArtistDetail"),
    children: [
      // /artist/1234/
      {
        path: "",
        name: "ArtistDetailDetail",
        component: () => import("../views/artist/Detail")
      },
      // /artist/1234/mv
      {
        path: "mv",
        name: "ArtistDetailMV",
        component: () => import("../views/artist/MV"),
        meta: { requiresAuth: true }
      },
      // /artist/1234/desc
      {
        path: "desc",
        name: "ArtistDetailDesc",
        component: () => import("../views/artist/Desc"),
        meta: { requiresAuth: true }
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/About.vue'),
    beforeEnter: (to, from, next) => {
      // console.log(to, from)
      next()
    }
    // component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // linkExactActiveClass: "global-exact",
  // linkActiveClass: "active1"
})

// 路由钩子函数
router.beforeEach((to, from, next) => {
  // console.log("to:", to)
  // console.log("from:", from)
  // if (to.name === "ArtistDetailDetail") {
  //   // 判断权限，进行拦截
  //   next({ name: "About" })
  // }
  console.log(to.meta.requiresAuth)
  if (to.meta.requiresAuth) {
    // next({ name: "About" })
  }
  next()
})
router.afterEach((to, from) => {
  // 记录用户行为，跟踪用户
  // console.log("afterEach to:", to)
  // console.log("afterEach from:", from)
})

export default router
